<template lang='pug'>
  .page(@click="dropdownShowFn")
    .search-form
      Row(type="flex" justify="start" :gutter="16")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 8}")
          span.label-txt.w80 邮件主题：
          Input(v-model="searchForm.Theme" placeholder="请输入主题关键字" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 8}")
          span.label-txt.w80 收件人：
          Input(v-model="searchForm.FromName" placeholder="请输入收件人" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 8}")
          span.label-txt.w80 创建时间：
          DatePicker(type="daterange" placeholder="请选择" style="width: 100%" @on-change="dateChange")
          Button.ml-15(v-if="hasFind" type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :loading="loading" @on-selection-change="onSelectChange" :stripe="true")
        ._table_header(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
          .pull-right.table-title-btns
            i-button.mr-10(v-if="hasDel" type="info" @click="DeleteMail(type)") 回收
        template(slot-scope="{ row, index }" slot="theme")
          div.theme
            i.iconfont(:class="row.status?'icon-youjian1':'icon-yidu'")
            span.u-d-info(@click="gotoDetail(type, row.id)") {{row.theme}}
        template(slot-scope="{ row, index }" slot="action")
          Button.mr-5(v-if="hasEditAgain" type="text" size="small" @click="editAgainBtn(row.id)") 编辑
          Button(v-if="hasDraw" type="text" :disabled="row.withdrawStatus?true:false" size="small" @click="handleWithdraw(row.id)") {{row.withdrawStatus?'已撤回':' 撤回'}}
        ._table_footer(slot="footer")
          //- span 共{{totalRows}}条
          template
            Page(class="_page" :total="totalRows" :current="searchForm.PageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" @on-page-size-change="onpageSizeChange" show-sizer show-total :page-size-opts="[10, 20, 30, 50, 100]")
    Detail(ref="detail_info" :loading="loading" :detailData="detailData" :replyShow="replyShow" @get-list="getList(type)")
    edit-again(ref="edit_again" :mailId="editMailId" @get-list="getList(type)")
</template>

<script>
import Mixin from '../mixin.js'
import mailApi from '../service.js'
import editAgain from '../editAgain/index.vue'

export default {
  name: 'mail-outbox',
  props: {},
  mixins: [Mixin],
  data () {
    return {
      editMailId: '',
      type: 2,
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '邮件主题',
          minWidth: 300,
          key: 'theme',
          slot: 'theme'
        },
        {
          title: '收件人',
          width: 200,
          align: 'center',
          key: 'name',
          tooltip: true
        },
        {
          title: '创建时间',
          width: 190,
          align: 'center',
          key: 'createdOn',
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.createdOn) {
              times = row.createdOn.slice(0, 19).replace(/T/, ' ')
            }
            return h('span', times)
          }
        },
        {
          title: '操作',
          width: 170,
          align: 'center',
          slot: 'action'
        }
      ]
    }
  },

  components: {
    editAgain
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 回收
    hasDel () {
      return this.actionArr.indexOf('Delete') > -1
    },
    // 撤回
    hasDraw () {
      return this.actionArr.indexOf('Withdraw') > -1
    },
    // 编辑
    hasEditAgain () {
      return this.actionArr.indexOf('EditAgain') > -1
    }
  },

  beforeMount () {},

  mounted () {
    // this.getFirstParentCompanys(1)
    this.getList(this.type)
  },

  methods: {
    dropdownShowFn () {
      this.$refs.edit_again.dropdownShowFn()
    },
    searchBtn () {
      this.searchForm.PageIndex = 1
      this.getList(this.type)
    },
    /**
     * 分页
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.searchForm.PageIndex = val
      this.getList(this.type)
    },
    /**
     * 分页页码变动
     */
    onpageSizeChange (val) {
      this.searchForm.PageIndex = 1
      this.searchForm.PageSize = val
      this.getList(this.type)
    },
    // 再次编辑
    editAgainBtn (id) {
      this.editMailId = id
      this.$refs.edit_again.openModal()
    },
    // 撤回
    handleWithdraw (id) {
      this.$Modal.confirm({
        title: "提示",
        content: "<p>确定要撤回邮件吗？</p>",
        onOk: () => {
          mailApi.Withdraw({
            id
          }).then(res => {
            this.$Message.info(res.data.message)
            this.getList(this.type)
          })  
        },
        onCancel: () => {}
      });
    }
  },

  watch: {
    $route (to, from) {
      if (this.$store.state.mail.outboxChange) {
        this.getList(this.type)
        this.handleOutbox(false)
      } else {
        return false
      }
    }
  }

}

</script>
<style lang='less' scoped>
  .theme{
    position: relative;
    padding-left: 24px;
    .iconfont{
      position: absolute;
      top: 0;
      left: 0;
      color: #FFB319;
      font-size: 14px;
    }
    .icon-yidu{
      color: #cecccc;
    }
  }
</style>
